<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <link rel="stylesheet" href="../../lay/layui/css/layui.css" media="all">
  <link rel="stylesheet" href="../../lay/style/admin.css" media="all">
  <link rel="stylesheet" href="../../lay/style/admin.css" media="all">
  <link rel="stylesheet" href="../../lay/lib/extend/dtree/dtree.css" media="all">
  <link rel="stylesheet" href="../../lay/lib/extend/dtree/font/dtreefont.css" media="all">
  <style>
    .editor {
      float: left;
    }

    .layui-card-header .layui-icon {
      position: initial;
      margin-top: 0;
      line-height: unset;
    }

    .layui-upload-img {
      width: 200px;
      /*height: 90px;*/
    }
  </style>
</head>
<body>
<div class="layui-fluid">
  <div class="layui-card">
    <div class="layui-fluid">
      <div class="layui-tab-content">
        <div class="layui-form">
          <div class="layui-form-item">
            <label for="name" class="layui-form-label">部门名称：</label>
            <div class="layui-input-inline">
              <input class="layui-input" id="name" name="name" lay-verify="required" placeholder="">
            </div>
          </div>
          <div class="layui-form-item">
            <label for="pid" class="layui-form-label">上级部门：</label>
            <div class="layui-input-inline">
              <input class="layui-input" id="pid" name="pid" autocomplete="off" type="hidden" lay-verify="required" placeholder="">
              <input class="layui-input" id="fName" name="fName" autocomplete="off" lay-verify="required" placeholder="">
            </div>
          </div>
          <div class="layui-form-item">
            <label for="leaderId" class="layui-form-label">部门主管：</label>
            <div class="layui-input-inline">
              <select name="leaderId" id="leaderId" lay-search>
                <option value="">请选择部门主管</option>
              </select>
            </div>
          </div>
          <div class="box-footer layui-text-center">
            <div class="align-center">
              <button lay-submit class="submit layui-btn layui-btn-normal" lay-filter="*"
                      data-loading="<i class='layui-icon layui-icon-loading layui-icon layui-anim layui-anim-rotate layui-anim-loop'></i> 提交中">
                提交
              </button>
              <a class="layui-btn layui-btn-warm" href="javascript:history.back(-1)">取消</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<script src="../../util/httpUtil.js"></script>
<script src="../../lay/layui/layui.js"></script>
<script>
  layui.config({
    base: '../../lay'
  }).extend({
    dtree: '/lib/extend/dtree'
  }).use(['form', 'jquery', 'layer', 'element', 'upload', 'laydate', 'dtree'], function () {
    var $ = layui.$;
    var form = layui.form;
    var dtree = layui.dtree;
    var laydate = layui.laydate;
    var departId = getUrlParam('id') ? getUrlParam('id') : "";
    var initTreeVal = "0";

    //时间选择器
    laydate.render({
      elem: '#startWork'
      ,type: 'time'
    });

    //时间选择器
    laydate.render({
      elem: '#endWork'
      ,type: 'time'
    });

    //数据回显
    if (departId !== ""){
      HTTPUtil.post('/yl/ylDepartment/get', {id : departId })
              .then(function (json) {
                if (json.state === 'success') {
                  $('#name').val(json.data.name);
                  $('#pid').val(json.data.pid);
                  $('#fName').val(json.data.pName);
                  $('#startWork').val(json.data.startWork);
                  $('#endWork').val(json.data.endWork);
                  $('#leaderId').val(json.data.leaderId);
                  getUserList(departId,json.data.leaderId);
                  initTreeVal = json.data.pid;
                } else {
                  layer.msg(json.msg, {icon: 2});
                }
              });
    }else {
      getUserList("","");
    }
    function getUserList(departId,leaderId) {
      HTTPUtil.post('/user/sysUser/getByDepartId', {departId: departId})
              .then(function (json) {
                if (json.state === 'success') {
                  for (var i = 0; i < json.data.length; i++) {
                    if (json.data[i].id === leaderId) {
                      $('#leaderId').append('<option value="' + json.data[i].id + '" selected>' + json.data[i].name + '</option>')
                    } else {
                      $('#leaderId').append('<option value="' + json.data[i].id + '">' + json.data[i].name + '</option>')
                    }
                  }
                  form.render('select')
                } else {
                  layer.msg(json.msg,{icon: 2});
                }
              })
    }


    form.on('submit(*)', function (data) {
      $(this).addClass('layui-btn-disabled');
      $(this).html($(this).data('loading'));
      var name = $('#name').val();
      var pid = $('#pid').val();
      var leaderId = $('#leaderId').val();
      var endWork = $('#endWork').val();
      var startWork = $('#startWork').val();
      HTTPUtil.post('/yl/ylDepartment/store', {id:departId,name: name,pid:pid,endWork:endWork,startWork:startWork,leaderId:leaderId})
              .then(function (json) {
                if (json.state === 'success') {
                  layer.msg(json.msg,{icon: 1,time:500},function () {
                    window.location.href = 'departList.html';
                  });
                } else {
                  layer.msg(json.msg,{icon: 2});
                }
              })
    });
    $('#fName').click(function () {
      dtree.render({
        elem: "#tree",  //绑定元素
        url: '/yl/ylDepartment/treeList',
        dataFormat:"list",  //异步接口
        initLevel: 2,
        dot: false,
        response: {statusCode : "200", rootName: "data", treeId:"id",parentId: "pid",title: "name"},
        done: function(data, obj){
          dtree.dataInit("tree", initTreeVal); // 选中深圳市
        }
      });
      var box = layer.open({
        title: '选择上级部门',
        type: 1,
        content: $('#tree'),
        btn: ['确定', '取消'],
        yes: function (index, layero) {
          layer.close(box);
        }
      })
    });

    //单击节点 监听事件
    dtree.on("node('tree')" ,function(param){
      $("#pid").val(param.param.nodeId);
      $("#fName").val(param.param.context);
      initTreeVal = param.param.nodeId;
    });

  });

</script>
</body>
</html>
<ul id="tree" class="dtree" data-id="0" style="display: none"></ul>